<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ONESTAR-时间轴</title>
    <!--    抽取公共头部-->
    <div th:replace="share/common :: head"></div>
</head>
<link rel="stylesheet" type="text/css" href="/css/reset_y.css">
<link rel="stylesheet" type="text/css" href="/css/archives.css"/>
<body class="impress-not-supported">
<!--背景图片-->
<div id="container">
    <div class="pic" id="div1">
        <img src="../static/images/backimg1.jpg" th:src="@{/images/bg04.jpg}" style="background-size: cover;
   -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;position:fixed;
      top: 0;
     left: 0;
     width:100%;
      height:100%;
      min-width: 1000px;
      z-index:-10;
      zoom: 1;
     background-color: #fff;">
    </div>
</div>
<!--导航-->
<nav id="nav" class="timeline-header">
    <div class="ui container">
        <div class="ui secondary stackable menu">
            <h1 class="m-item ui red header item m-mobile-hide" style="font-family: STSong">
                国殇
            </h1>
            <!--<div class="right m-reditem item m-mobile-hide">-->
            <a th:href="@{/index/1/6}" href="#" class="m-item ui red small header item m-mobile-hide"><i
                    class="home icon"></i>首页</a>
            <a th:href="@{/archives/1931}" href="#" class="m-item ui red active small header item m-mobile-hide"><i
                    class="clock icon"></i>时间轴</a>
            <a th:href="@{/hero/1/6}" href="#" class="m-item ui red small header item m-mobile-hide"><i
                    class="clone outline icon"></i>英雄名录</a>
            <a th:href="@{/battle}" href="#" class="m-item ui red small header item m-mobile-hide"><i
                    class="pencil alternate icon"></i>重大战役</a>
            <a th:href="@{/violence}" href="#" class="m-item ui red small header item m-mobile-hide"><i
                    class="image icon"></i>日寇暴行</a>
            <a th:href="@{/message}" href="#" class="m-item ui red small header item m-mobile-hide"><i
                    class="book icon"></i>留言板</a>
            <a th:href="@{/about}" href="#" class="m-item ui red small header item m-mobile-hide"><i
                    class="info icon"></i>关于本站</a>
            <!--</div>-->
            <!--        search start-->
            <div class="right m-item item m-mobile-hide">
                <form name="search" action="#" method="post" target="_blank">
                    <div class="ui icon transparent input m-margin-tb-tiny" style="color: red">
                        <input style="color: white" type="text" name="query" placeholder="Search....">
                        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                    </div>
                </form>
            </div>
            <!--        search  end-->
        </div>
    </div>
    <a class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--时间轴内容-->
<div class="doc-container m-padded-tb-massivex m-opacity" id="doc-container">
    <th:block>
        <section id="timeline" class="timeline">
            <div id="line" class="line_white"></div>
            <div id="impress">
                <!--		time line start-->
                <div id="timeList">
                    <!--			year shows -->
                    <div class="step year" data-x="-400" data-y="0" data-scale="0.5" id="0">
                        <div class="year2012" th:text="${curYear}">2012</div>
                        <div class="list_show" th:text="${curYear+'年'}">2012年<br/></div>
                    </div>
                    <!--			To edit-->


                    <div th:each="month,itemStat:${months}" th:id="${itemStat.count}" class="timeList_item step" th:data-x="${itemStat.count*150}" data-y="0" id="1">
                        <div class="circle" th:text="${#dates.format(month.archives,'MM')+'月'}">04/09</div>
                        <h2 class="timeList_item_title" th:text="${month.title}">收录软件超过2万</h2>
                        <div class="list_show">
                            <img src="/images/event3.png" width="500">
                            <h2><a target="_blank" href="" th:href="'/detail/?blogId='+${month.blogId}" th:text="${month.title}">收录软件超过2万</a></h2>
                            <p th:text="${month.description}"></p>
                        </div>
                    </div>

                    <!--                    <div th:each="month,itemStat:${months}" th:id="${itemStat.count}" class="timeList_item step" th:data-x="${itemStat.count*100}" data-y="0" id="1">-->
<!--                        <div class="circle">02/29</div>-->
<!--                        <h2 class="timeList_item_title" th:text="${month.description}">全面启用HTTPS登陆</h2>-->
<!--                    <div class="list_show show1">-->
<!--                        <img src="/images/event1.jpg" width="500">-->
<!--                        <h2><a href="#">全面启用HTTPS登陆</a></h2>-->
<!--                        <p>彻底保护你的密码不被嗅探和盗用<br/>OSCHINA采用商业证书，值得信赖</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--                    <div class="timeList_item step" data-x="200" data-y="0" id="2">-->
<!--                        <div class="circle">03/10</div>-->
<!--                        <h2 class="timeList_item_title">空间自定义风格</h2>-->
<!--                        <div class="list_show">-->
<!--                            <img src="/images/event2.jpg">-->
<!--                            <h2><a href="#">全面启空间自定义风格</a></h2>-->
<!--                            <p class="m160">Less CSS 框架开发<br/>7种方案随心选择</p>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="timeList_item step" data-x="400" data-y="0" id="3">-->
<!--                        <div class="circle">04/09</div>-->
<!--                        <h2 class="timeList_item_title">收录软件超过2万</h2>-->
<!--                        <div class="list_show">-->
<!--                            <img src="/images/event3.png" width="500">-->
<!--                            <h2><a href="#">收录软件超过2万</a></h2>-->
<!--                            <p>截至2012年4月3日，收录的软件/项目（包括极少部分商业软件）达到2万款。</p>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="timeList_item step" data-x="600" data-y="0" id="4">-->
<!--                        <div class="circle">04/15</div>-->
<!--                        <h2 class="timeList_item_title">成都源创会</h2>-->
<!--                        <div class="list_show show3">-->
<!--                            <img src="/images/event4.jpg" width="500">-->
<!--                            <h2><a href="#">成都源创会</a></h2>-->
<!--                            <p><img src="/images/chengdu.jpg"/></p>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="timeList_item step" data-x="800" data-y="0" id="5">-->
<!--                        <div class="circle">05/02</div>-->
<!--                        <h2 class="timeList_item_title">开源U型枕</h2>-->
<!--                        <div class="list_show">-->
<!--                            <img src="/images/event5.png" width="500">-->
<!--                            <h2><a href="#">开源U型枕</a></h2>-->
<!--                            <p>倾情定制，开源U型枕！<br/>我们找了我们能找到的最好的工厂，用最好的面料加最好的粒子定制！</p>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div  class="timeList_item step" data-x="1000" data-y="0" id="6">-->

<!--                        <div class="circle">05/04</div>-->
<!--                        <h2 class="timeList_item_title">OSChina客户端发布</h2>-->
<!--                        <div class="list_show">-->
<!--                            <img src="/images/event6.png" width="500">-->
<!--                            <h2><a href="#">OSChina客户端发布</a></h2>-->
<!--                            <p>千呼万唤始出来 - OSChina Android 客户端发布</p>-->
<!--                        </div>-->
<!--                    </div>-->

                    <!--			2013 year start-->
                    <!--                    <div class="step" data-x="4200" data-y="0" data-scale="0.5" id="2013">-->
                    <!--                        <div class="year2013"> 2013</div>-->
                    <!--                        <div class="list_show year"> 此时末日已远······</div>-->
                    <!--                    </div>-->
                    <!--                    <div class="timeList_item step" data-x="4600" data-y="0" id="23">-->
                    <!--                        <div class="circle">01/06</div>-->
                    <!--                        <h2 class="timeList_item_title">OSChina 翻译频道上线</h2>-->
                    <!--                        <div class="list_show">-->
                    <!--                            <img src="images/event23.png" width="500">-->
                    <!--                            <h2><a href="#">OSChina 翻译频道上线</a></h2>-->
                    <!--                            <p class="m160">我们将一篇长篇的英文文章人工切分成一小段，你可以直接翻译其中的一段，大家一起来完成一整篇文章，不再孤独、寂寞、烦躁、无助 ：）-->
                    <!--                                而且翻译通过编辑审核之后会有积分赠送。</p>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                    <!--                    <div class="timeList_item step" data-x="4800" data-y="0" id="24">-->
                    <!--                        <div class="circle">01/31</div>-->
                    <!--                        <h2 class="timeList_item_title">JetBrains 开发工具全场2折</h2>-->
                    <!--                        <div class="list_show">-->
                    <!--                            <img src="images/event24.jpg" class="opacity7">-->
                    <!--                            <h2><a href="#">JetBrains 开发工具全场2折</a></h2>-->
                    <!--                            <p class="m160">-->
                    <!--                                每个人都有选择的权力。你可以选择开源，可以选择正版，当然在国内选择盗版也没人管你。作为软件产业的一份子，我们十分清楚软件的价值，我们应该尊重他人的劳动，这样他人才会尊重你的工作成果。-->
                    <!--                                <br/>-->
                    <!--                                拒绝盗版，选择开源 or 正版！</p>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                    <!--                    <div class="timeList_item step refresh" data-x="5000" data-y="0" id="25">-->
                    <!--                        <div class="list_show">-->
                    <!--                            <a href='javascript:replay();'><img src="images/refress.png"/></a>-->
                    <!--                            <p class="end">OSC 的发展离不开您的支持！2013，我们会更加努力！</p>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                </div>
            </div>
        </section>
    </th:block>
</div>

<!--左侧导航栏-->
<div class="ui sidebar vertical menu">
    <div class="item" style="text-align: left">
        <h4 class="ui red header">年份</h4>
    </div>
    <div class="item" style="text-align: left">
        <a th:classappend="${curYear=='1931'?'red active':''}" href="/archives/1931" class="item m-text-thin ">1931年</a>
        <a th:classappend="${curYear=='1932'?'red active':''}" href="/archives/1932" class="item">1932年</a>
        <a th:classappend="${curYear=='1933'?'red active':''}" href="/archives/1933" class="item">1933年</a>
        <a th:classappend="${curYear=='1934'?'red active':''}" href="/archives/1934" class="item">1934年</a>
        <a th:classappend="${curYear=='1935'?'red active':''}" href="/archives/1935" class="item">1935年</a>
        <a th:classappend="${curYear=='1936'?'red active':''}" href="/archives/1936" class="item ">1936年</a>
        <a th:classappend="${curYear=='1937'?'red active':''}" href="/archives/1937" class="item">1937年</a>
        <a th:classappend="${curYear=='1938'?'red active':''}" href="/archives/1938" class="item">1938年</a>
        <a th:classappend="${curYear=='1939'?'red active':''}" href="/archives/1939" class="item">1939年</a>
        <a th:classappend="${curYear=='1940'?'red active':''}" href="/archives/1940" class="item">1940年</a>
        <a th:classappend="${curYear=='1941'?'red active':''}" href="/archives/1941" class="item">1941年</a>
        <a th:classappend="${curYear=='1942'?'red active':''}" href="/archives/1942" class="item">1942年</a>
        <a th:classappend="${curYear=='1943'?'red active':''}" href="/archives/1943" class="item">1943年</a>
        <a th:classappend="${curYear=='1944'?'red active':''}" href="/archives/1944" class="item">1944年</a>
        <a th:classappend="${curYear=='1945'?'red active':''}" href="/archives/1945" class="item">1945年</a>
    </div>
</div>
<div class="ui red labeled icon button top_button" style="position:fixed; bottom:600px;">
    <i class="sidebar icon"></i>抗战时间
</div>
<br><br><br><br><br><br><br><br><br><br><br>

<script id="jquery_183" type="text/javascript" class="library" src="/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/js/impress.js"></script>
<script type="application/javascript" src="/js/archives.js"></script>
<!--抽取公共底部栏-->
<!--<div th:replace="share/common :: #footer"></div>-->

<!--    抽取公共js-->
<div th:replace="share/common :: #js"></div>

<script>
    $(".ui.button").click(function () {
        $(".ui.sidebar").sidebar({transition: 'slide along'})
            .sidebar("toggle");
    });

    $(".ui.button").click(function () {
        $(".ui.sidebar").sidebar({transition: 'slide along'})
            .sidebar("toggle");
    });
</script>
</body>
</html>